<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq购物车</title>
	<script src="jquery-1.12.3.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		table{
			width: 500px;
			height: 400px;
			margin:200px auto 0;
			text-align: center;
		}
	</style>
</head>
<body>
	<table border="1px" cellspacing="0">
		<tr>
			<td>
				<input type="checkbox" class="checkAll">
				<label for="checkAll">全选</label>	
			</td>
			<td>
				商品
			</td>
			<td>
				单价
			</td>
			<td>
				数量
			</td>
			<td>
				小计
			</td>
			<td>
				操作
			</td>
		</tr>
		<tr class="goods">
			<td>
				<input type="checkbox" class="checks">
			</td>
			<td>
				小米
			</td>
			<td>
				<span class="singlePrice">1399</span>元
			</td>
			<td>
				<button class="jian">-</button>
				<span>1</span>
				<button class="add">+</button>
			</td>
			<td class="xiaoJi">
				<span>1399</span>元
			</td>
			<td>
				<button class="delete">X</button>
			</td>
		</tr>
		<tr class="goods">
			<td>
				<input type="checkbox" class="checks">
			</td>
			<td>
				大米
			</td>
			<td>
				<span class="singlePrice">999</span>元
			</td>
			<td>
				<button class="jian">-</button>
				<span>1</span>
				<button class="add">+</button>
			</td>
			<td class="xiaoJi">
				<span>999</span>元
			</td>
			<td>
				<button class="delete">X</button>
			</td>
		</tr>
		<tr>
			<td>
				共<span class="thingsSum">2</span>件商品,
				已选择<span class="checkRights">0</span>件
			</td>
			<td></td>
			<td>
				合计(不含运费):
			</td>
			<td class="heJi"> 
				<span></span>元
			</td>
			<td>
				<button>结算</button>
			</td>
		</tr>
	</table>

	<script>
		$(function(){
			//总件数
			$(".thingsSum").html($(".goods").length);
			//总价的计算
			function checkAllPrice(){
				var sum=0;
				$(".checks:checked").each(function(index,element){
					var x=$(this).parent().parent().find(".xiaoJi").children("span").text();
					sum+=parseInt(x);
				})
				$(".heJi").children("span").text(sum);
			}
			//已选中个数
			function checkRightNum(){
				var x=$(".checks:checked").length;
				$(".checkRights").html(x);
				if ($(".checks").length==$(".checks:checked").length&&$(".checks").length!=0) {
					$(".checkAll").prop("checked",true);
				}else{
					$(".checkAll").prop("checked",false);
				}
			}


			//全选按钮及选中按钮
			$(".checkAll").change(function(){
				var x=$(this).prop("checked");
				$(".checks").prop("checked",x);
				checkAllPrice();
				checkRightNum();
			})

			$(".checks").click(function(){
				checkAllPrice();
				checkRightNum();
				
			})

			//加减控制数量
			function controlXiaoJi(x,num){
				var singlePrice=x.parent().parent().find(".singlePrice").html();
				var xiaoJiPrice=parseInt(num)*Number(singlePrice);
				x.parent().parent().find(".xiaoJi").children("span").html(xiaoJiPrice);
			}
			$(".add").click(function(){
				var num=$(this).prev().html();
				num++;
				$(this).prev().html(num);
				controlXiaoJi($(this),num);
				checkAllPrice();

			})
			$(".jian").click(function(){
				var num=$(this).next().html();
				num>0?num--:num=0;
				$(this).next().html(num);
				controlXiaoJi($(this),num);
				checkAllPrice();
			})

			//删除
			$(".delete").click(function(){
				$(this).parent().parent().remove();
				$(".thingsSum").html($(".goods").length);
				checkAllPrice();
				checkRightNum();
			})
		})
		//.each() each(index,element) 自动遍历某数组 element是js对象
	</script>
</body>
</html>